<template>
  <div class="container">
    <navBar :navBar="navBar"></navBar>
    <div class="content">
      <p class="title">{{ detailInfo.title }}</p>
      <p class="time">
        {{ formatTime(detailInfo.addtime, "yyyy-MM-dd HH:mm:ss") }}
      </p>
      <p class="text" v-html="detailInfo.editorValue"></p>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/tools.js";
import navBar from "@/components/navBar.vue";
export default {
  name: "newsDetail",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t('公告详情'),
        close: false,
        btn: "",
      },
      id: "",
      detailInfo: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    formatTime,
    init() {
      let data = {
        language: String(this.$i18n.locale).toUpperCase(),
        helpId: this.$route.query.id,
      };
      $postAxios(api.getHelpDetail, data, (res) => {
        if (res.code == 0) {
          this.detailInfo = res.data;
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #f7f6fb;
  .content {
    padding: 20px 15px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .title {
      margin-bottom: 5px;
      color: #333;
      font-size: 20px;
      font-weight: 700;
    }
    .time {
      margin-bottom: 10px;
      padding-bottom: 10px;
      color: #999;
      font-size: 12px;
      border-bottom: 1px solid #c8c7cc;
    }
    .text {
      color: #333;
      font-size: 14px;
      text-indent: 2em;
      line-height: 1.5;
    }
  }
}
</style>